<template>
  <div class="cloud_store_orders">
    <div v-if="orderActive == 0">
      <div class="tabbar">
        <tabs v-model="active" color="#283C79" :swipe-threshold="6" @change="onTabChange">
          <tab title="全部"></tab>
          <tab title="待支付"></tab>
          <tab title="上级缺货"></tab>
          <tab title="已完成"></tab>
        </tabs>
      </div>

      <div class="product-list">
        <list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
          ref="loadList"
        >
          <div
            class="item product-item"
            @click="goToOrderDetail(item)"
            v-for="(item,index) in ordersList"
            :key="index"
          >
            <div class="number">
              <p>编号：{{item.orderNumber}}</p>
              <p>{{stateList[item.state]}}</p>
            </div>
            <div class="time">时间：{{item.dealTime}}</div>
            <product-item
              v-for="(i,n) in item.goods"
              :key="n"
              :cover="i.goodsImg ? staticHost + i.goodsImg : ''"
            >
              <div class="product-info" slot="product-item">
                <p>{{i.goodsName}}</p>
                <p>{{i.size}}</p>
                <p>
                  <span class="single-price">￥{{i.price}}</span>
                  <span>x {{i.num}}</span>
                </p>
              </div>
            </product-item>
            <div class="total">
              <p>
                共 {{item.goods.length}} 件商品，共：
                <span class="total-price">￥{{item.orderMoney}}</span>
              </p>
            </div>
          </div>
        </list>
      </div>
    </div>

    <div v-if="orderActive == 1">
      <div class="tabbar">
        <tabs v-model="active" color="#283C79" :swipe-threshold="6" @change="onTabChange">
          <tab title="全部"></tab>
          <tab title="上级缺货"></tab>
          <tab title="已完成"></tab>
        </tabs>
      </div>

      <div class="product-list">
        <list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
          ref="loadList"
        >
          <div
            class="item product-item"
            @click="goToOrderDetail(item)"
            v-for="(item,index) in ordersList"
            :key="index"
          >
            <div class="number">
              <p>编号：{{item.orderNumber}}</p>
              <p>{{stateList[item.state]}}</p>
            </div>
            <div class="time">时间：{{item.dealTime}}</div>
            <product-item
              v-for="(i,n) in item.goods"
              :key="n"
              :cover="i.goodsImg ? staticHost + i.goodsImg : ''"
            >
              <div class="product-info" slot="product-item">
                <p>{{i.goodsName}}</p>
                <p>{{i.size}}</p>
                <p>
                  <span class="single-price">￥{{i.price}}</span>
                  <span>x {{i.num}}</span>
                </p>
              </div>
            </product-item>
            <div class="total">
              <p>
                共 {{item.goods.length}} 件商品，共：
                <span class="total-price">￥{{item.orderMoney}}</span>
              </p>
            </div>
          </div>
        </list>
      </div>
    </div>

    <tabbar v-model="orderActive" @change="onTabbarChange">
      <tabbar-item icon="balance-list">云仓进货订单</tabbar-item>
      <tabbar-item icon="cluster">下级订单</tabbar-item>
    </tabbar>
  </div>
</template>

<script>
import productItem from "../components/product_item.vue";
import { Tab, Tabs, Tabbar, TabbarItem, Icon, List } from "vant";
import { staticHost } from "../service/HOST.js";

export default {
  components: {
    productItem,
    Tab,
    Tabs,
    Tabbar,
    TabbarItem,
    Icon,
    List
  },
  data() {
    return {
      staticHost,
      active: Number(localStorage.getItem("tabbarIndex")) || "0",
      orderActive: 0,
      loading: false,
      finished: false,
      pageNumber: 1,
      pageSize: 10,
      ordersList: [],
      stateList: {
        0: "待支付",
        1: "待发货",
        2: "已发货",
        3: "已完成",
        4: "上级缺货",
        5: "已取消"
      }
    };
  },
  beforeRouteLeave(to, from, next) {
    if (to.path == "/home/my") {
      localStorage.removeItem("tabbarIndex");
    }
    next();
  },
  methods: {
    onLoad() {
      let userType = null;
      let orderType = "YJ";
      let state = null;

      // 云仓进货订单
      if (this.orderActive == 0) {
        userType = "self";
        switch (this.active) {
          case 0: // 全部
            state = "";
            break;
          case 1: // 待支付
            state = 0;
            break;
          case 2: // 上级缺货
            state = 4;
            break;
          case 3: // 已完成
            state = 3;
            break;
        }

        // 下级订单
      } else if (this.orderActive == 1) {
        userType = "down";
        switch (this.active) {
          case 0: // 全部
            state = "";
            break;
          case 1: // 上级缺货
            state = 4;
            break;
          case 2: // 已完成
            state = 3;
            break;
        }
      }

      this.$http
        .post(this.$urls.YCDDLB, {
          userType: userType,
          orderType: orderType,
          state: state,
          pageNumber: this.pageNumber,
          pageSize: this.pageSize
        })
        .then(res => {
          if (res.data.code == 200) {
            this.ordersList = this.ordersList.concat(res.data.data);

            this.pageNumber++;
            this.loading = false;
          } else if (res.data.code == 300) {
            this.loading = false;
            this.finished = true;
          }
        });
    },
    // 底部 tabbar切换时
    onTabbarChange(index) {
      this.orderActive = index;
      this.active = 0;
      this.loading = false;
      this.finished = false;
      this.pageNumber = 1;
      this.pageSize = 10;
      this.ordersList = [];

      setTimeout(() => {
        this.$refs.loadList.check();
      }, 100);
    },
    // 顶部 tab切换时
    onTabChange(index) {
      this.active = index;
      localStorage.setItem("tabbarIndex", this.active);

      this.loading = false;
      this.finished = false;
      this.pageNumber = 1;
      this.pageSize = 10;
      this.ordersList = [];

      setTimeout(() => {
        this.$refs.loadList.check();
      }, 100);
    },
    // 跳转到订单详情
    goToOrderDetail(item) {
      // localStorage.setItem("orderDetail", JSON.stringify(item));

      this.$router.push({
        path: "/order_detail",
        query: {
          orderNumber: item.orderNumber
        }
      });
    }
  }
};
</script>

<style scoped>
.cloud_store_orders {
  /* height: 100%; */
}

.product-list {
  margin-top: 5px;
  padding-bottom: 60px;
  /* overflow: hidden; */
}

.tabbar {
  position: sticky;
  top: 0;
}

.item {
  margin-bottom: 5px;
}

.item:last-child {
  margin-bottom: 20px;
}

.product-item {
  background-color: #fff;
  padding: 10px 0;
}

.product-info {
  padding-left: 10px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.product-info > p:last-child {
  flex: 1;
  display: flex;
  align-items: flex-end;
}

.total,
.number,
.time {
  padding: 0 15px;
}
.number {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.number > p:last-child {
  font-size: 0.9rem;
  background-color: #9bb9d6;
  color: #fff;
  padding: 1px 6px;
  border-radius: 4px;
}

.time {
  margin-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-between-color);
}

.total {
  margin-top: 10px;
  text-align: right;
}

.single-price {
  padding-right: 10px;
}

.single-price,
.total-price {
  color: var(--money-up);
}
</style>

<style>
.cloud_store_orders .van-tabbar-item--active {
  color: #283c79;
}
</style>